<template>
  <div class="flex-row type">
    <image mode="widthFix" :src="type.img" />
    <div class="slogo flex-center flex-middle flex-column">. {{type.name}}分类 .</div>
    <div class="bottom">
      <div class="tip">{{type.tip}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // key: value
      }
    },
    props: {
      type: {
        type: Object,
        default: function() {
          return {}
        }
      },
    },
  }
</script>

<style scoped>
.type {
  overflow: hidden;
  width: 95%;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0,0,.1);
}
image {
  width: 100%;
}
.slogo {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  height: 30px;
  width: 60%;
  position: relative;
  margin-top: -15px;
  border-top: 1px solid #fff;
  border-radius: 0 40px 5px 0;
  padding-right: 20px;
  background: rgba(35,58,107,.3);
}
.bottom {
  padding: 5px 15px 5px;
}
.bottom .title {
  font-size: 17px;
  color: #333;
}
.bottom .tip {
  color: #444;
  font-size: 13px;
  margin-bottom: 5px;
}
</style>